<template>
  <el-dialog title="测评票预览" :fullscreen='true' :close-on-click-modal="false" :visible.sync="show" width="100%">
<div class="fontDa">
    <div class="customTableHeader">
      <div class="customTableTitle">{{ cppName }}</div>
    </div>
    <div class="zhaoPian">
      <div style="padding-bottom: 10px;">单位：{{dw}}</div>
    </div>
    <div class="cpTable">
      <div class="table-box">
        <table v-for="(tableColumn,index) in radioList">
          <thead>
            <tr>
              <td style="background:#b0bde2;font-weight:bold;" colspan="10">{{index+1}}、{{tableColumn.title}}</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <template v-for="(item,index) in tableColumn.optList">
                <td>{{item.optName}}</td>
                <td  style="width: 150px;">
                  <el-button type="text" icon="el-icon-success" class="cpCheck"  v-if="item.show1 == 1"></el-button>
                  <el-button type="text" class="cpCheck" v-else><i class="noChecked" ></i></el-button>
                </td>
              </template>
            </tr>
          </tbody>
        </table>
        <table v-for="(multiSelect,index) in multipleList">
          <thead>
            <tr>
              <td style="background:#b0bde2;font-weight:bold;" colspan="2">{{radioList.length+index+1}}、{{multiSelect.title}}</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in multiSelect.optList">
              <td style="text-align: left">{{item.optName}}</td>
              <td style="width: 150px;">
                <el-button type="text" icon="el-icon-success" class="cpCheck"  v-if="item.shows == 1"></el-button>
                <el-button type="text" class="cpCheck" v-else><i class="noChecked" ></i></el-button>
              </td>
            </tr>
          </tbody>
        </table>
        <table v-for="(questionList,indexs) in qList">
          <thead>
            <tr>
              <td style="background:#b0bde2;font-weight:bold;" colspan="2">{{radioList.length+multipleList.length+indexs+1}}、{{questionList.title}}</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <el-input
                  type="textarea"
                  placeholder="请输入内容"
                  readonly
                  v-model="questionList.answer">
                </el-input>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div style="width: 100%;" class="zfheaderbox">
        <div>{{footerText}}</div>
      </div>
      <!-- <el-button @click="exportExcel(111)">导出</el-button> -->
    </div>
</div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      cppName: '',
      dw:"",
      time:"",
      msgList:[],
      multiSelect:{},
      tableColumn: {},
      qList:[],
      radioList:[],
      multipleList:[],
      footerText:""
    }
  },
  methods: {
    initConfig(id) {
      this.show = false;
      this.df = true;

    },
    initXp(r) {
      this.time = r.sheetDate;
      this.dw = r.sheetDept;
      this.footerText = r.footerText;
      this.radioList=[];
      this.multipleList=[];
      this.qList = [];
     //console.log(r)
     //console.log(JSON.parse(r.ruleDetailJson))
      this.msgList = JSON.parse(r.ruleDetailJson)
      this.msgList.forEach(item=>{
        if(item.itemType == 1){
          this.radioList.push(item)
        }else if(item.itemType == 3){
          this.qList.push(item)
        }else if(item.itemType == 2){
          this.multipleList.push(item)
        }
      })
      this.show = false;
      this.$nextTick(() => {
        this.cppName = r.cppName;
        this.show = true;
      });
    }
  }
}
</script>

<style>
.h_dw_time{
  text-align: left;
}
.table-box tr, .table-box tr td{
    border:solid 1px #b0bde2;
    height: 30px;
  }
  .table-box table{
    width:100%;
  }
  .table-box tr td{
    padding:8px 3px;
    font-size:24px;
    min-width:50px;
    color: #303745;
  }
  .table-box tbody{
    text-align: center;

  }
</style>

